import { Component } from 'react'
import { View, Text, Button, ScrollView, Image } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'

import './index.less'

@inject('store')
@observer
class Destinations extends Component {
    componentDidMount() { }

    componentDidShow() { }

    componentDidHide() { }

    // 跳转到添加目的地页面
    handleAddDestination = () => {
        Taro.navigateTo({
            url: '/pages/destinations/add/index'
        })
    }

    // 跳转到编辑目的地页面
    handleEditDestination = (id) => {
        Taro.navigateTo({
            url: `/pages/destinations/edit/index?id=${id}`
        })
    }

    // 删除目的地
    handleDeleteDestination = (id) => {
        Taro.showModal({
            title: '确认删除',
            content: '确定要删除这个目的地吗？',
            success: (res) => {
                if (res.confirm) {
                    const { destinationsStore } = this.props.store
                    const success = destinationsStore.deleteDestination(id)

                    if (success) {
                        Taro.showToast({
                            title: '删除成功',
                            icon: 'success',
                            duration: 2000
                        })
                    }
                }
            }
        })
    }

    // 切换目的地访问状态
    handleToggleVisited = (id) => {
        const { destinationsStore } = this.props.store
        destinationsStore.toggleVisited(id)
    }

    render() {
        const { destinationsStore: { destinations } } = this.props.store

        return (
            <View className='destinations'>
                <View className='destinations-header'>
                    <Text className='destinations-title'>旅游目的地</Text>
                </View>

                <ScrollView className='destinations-list' scrollY>
                    {destinations.length === 0 ? (
                        <View className='empty-tip'>
暂无目的地
                        </View>
                    ) : (
                        destinations.map(destination => (
                            <View className='destination-item' key={destination.id}>
                                <View className='destination-info'>
                                    <Text className='destination-name'>{destination.name}</Text>
                                    <Text className='destination-country'>{destination.country}</Text>
                                    <Text className='destination-desc'>{destination.description}</Text>
                                    <Text className={`destination-status ${destination.visited ? 'visited' : ''}`}>
                                        {destination.visited ? '已打卡' : '未打卡'}
                                    </Text>
                                </View>

                                <View className='destination-actions'>
                                    <Button
                                        className={`action-btn visit-btn ${destination.visited ? 'visited' : ''}`}
                                        onClick={() => this.handleToggleVisited(destination.id)}
                                    >
                                        {destination.visited ? '取消打卡' : '打卡'}
                                    </Button>
                                    <Button
                                        className='action-btn edit-btn'
                                        onClick={() => this.handleEditDestination(destination.id)}
                                    >
                                        编辑
                                    </Button>
                                    <Button
                                        className='action-btn delete-btn'
                                        onClick={() => this.handleDeleteDestination(destination.id)}
                                    >
                                        删除
                                    </Button>
                                </View>
                            </View>
                        ))
                    )}
                </ScrollView>
                
            </View>
        )
    }
}

export default Destinations